/*
 * @Author: malgee
 * @Date: 2025-04-17 11:28:15
 * @LastEditors: maling
 * @LastEditTime: 2025-04-28 08:45:40
 * @FilePath: /vue3-ts-cms/vue.config.js
 * @Description:
 *
 */
const AutoImport = require('unplugin-auto-import/webpack').default
const Components = require('unplugin-vue-components/webpack').default
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

// 引入 Icon 自动解析器
const IconsResolver = require('unplugin-icons/resolver').default
// 引入 Icon 自动注册
const Icons = require('unplugin-icons/webpack').default
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  // 关闭生产环境的 sourceMap
  productionSourceMap: false,
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 部署应用包时的基本 URL
  outputDir: 'build', // 生产环境构建文件的目录, 默认 dist

  // 配置项
  configureWebpack: {
    // 🔥配置方式一: 对象, 或者函数方式配置, 回和 webpack 的配置合并
    // config: {
    //   resolve: {
    //     alias: {
    //       '@': resolve('src'),
    //       '@assets': resolve('src/assets'),
    //       '@components': resolve('src/components'),
    //       '@views': resolve('src/views'),
    //       '@utils': resolve('src/utils')
    //     }
    //   }
    // },

    plugins: [
      //  自动导入
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue'],
        // 自动导入 Element Plus 组件, 自动导入 Element Plus 图标
        resolvers: [
          ElementPlusResolver(), 
          // 自动引入 ElementPlus 图标
          IconsResolver({ 
            // 图标前缀
            prefix: 'Icon' 
          })
        ],
        dts: resolve('src/auto-imports.d.ts')
      }),
      //  自动注册组件
      Components({
        // 自动注册 Element Plus 组件, 自动注册 Element Plus 图标
        resolvers: [
          // 使用 ElementPlus 自动引入解析器
          ElementPlusResolver(), 
          // 使用 ElementPlus 图标自动引入解析器
          IconsResolver({ 
            // 启用 ElementPlus 图标
            // enabledCollections: ['ep']
          })
        ],
        dts: resolve('src/auto-components.d.ts')
      }),
      // 自动注册图标
      Icons({
        // 自动安装图标组件
        autoInstall: true,
        // 指定编译器vue3
        compiler: 'vue3'
      })
    ]
  },
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境去除 console.log
      config.optimization.minimizer('terser').tap((args) => {
        // args[0].terserOptions.compress.drop_console = true
        return args
      })
    }
    // 🔥配置方式二: 链式配置
    config.resolve.alias
      .set('@', resolve('src'))
    config.resolve.extensions.add('.ts').add('.tsx').add('.js').add('.json')  // 使用后缀的文件 ts, tsx, js, json, 可以省略不写

    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  }
})
